<!--
  Billboard Demo Component

  This demo shows how to create and animate billboard entities
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Billboard Demo
  Description: This demo shows how to create and animate billboard entities
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
    
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { createAnimatedBillboard } from '../utils/cesiumUtils.js';

export default {
  name: 'BillboardDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // 添加一些动画广告牌
      const billboards = [
        { name: 'Billboard 1', lon: -75.1652, lat: 39.9526 },
        { name: 'Billboard 2', lon: -74.1652, lat: 40.9526 },
        { name: 'Billboard 3', lon: -73.1652, lat: 41.9526 }
      ];

      billboards.forEach((billboard, index) => {
        createAnimatedBillboard(viewer, {
          name: billboard.name,
          lon: billboard.lon,
          lat: billboard.lat,
          image: './images/logo.png', // 使用默认图像
          scaleFunction: () => 1.0 + 0.5 * Math.sin(Date.now() / 1000 + index),
          colorFunction: () => {
            const t = (Math.sin(Date.now() / 1000 + index) + 1) / 2;
            return new Cesium.Color(
              1.0,
              0.5 + 0.5 * Math.sin(Date.now() / 500 + index),
              0.5 + 0.5 * Math.cos(Date.now() / 700 + index),
              0.8 + 0.2 * t
            );
          }
        });
      });

      // 将视图定位到广告牌位置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-74.1652, 40.9526, 2000000)
      });
    };

    return {
      cesiumViewer,
      onViewerReady
    };
  }
};
</script>